<template>
  <div>
    <tree-transfer :t-data="gData" v-model:value="columnIds" />
    <div>{{ columnIds }}</div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue';
import TreeTransfer from '@/components/tree-transfer';
import { disposeTransferList } from '@/utils/helper';
import { findChildrenList } from '@/utils';
const colList = [
  {
    id: 1,
    rightName: '设置',
    parentId: 0,
  },
  {
    id: 2,
    rightName: '店铺设置',
    parentId: 1,
  },
  {
    id: 10,
    rightName: '服务',
    parentId: 0,
  },
  {
    id: 12,
    rightName: '已购服务',
    parentId: 10,
  },
  {
    id: 19,
    rightName: '秒杀',
    parentId: 10,
  },
];
export default defineComponent({
  name: '',
  setup() {
    // 有key和title的列表不需要经过disposeTransferList处理，因为没有Key和title的时候会给予警告
    // 容易出现一些意料之外的bug
    const colTransferList = disposeTransferList(colList, 'rightName', 'id');
    console.log(colTransferList);
    const state = reactive({
      gData: findChildrenList(colTransferList, 0),
      columnIds: [],
    });
    return {
      ...toRefs(state),
    };
  },
  components: {
    TreeTransfer,
  },
});
</script>
<style lang="less"></style>
